<template>
  <div class="home">
    <!-- <ul>
      <li v-for="(item,index) in list" :key="index" @click="jump(item)">{{item.name}}</li>
    </ul> -->
    <!-- 下面的这种导航方式，我们称为声明式导航 -->
    <!-- <router-link to="/about">去about</router-link> -->
    <ul>
      <router-link custom v-for="(item,index) in list" :key="index" :to="`/about?id=${item.id}`" v-slot="{ href,route,isActive,navigate,isExactActive}">
          <li @click="navigate">{{item.name}}</li>
      </router-link>
      
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src
import { ref } from 'vue';
import { useRouter } from 'vue-router';
export default {
  name: 'HomeView',
  components: {

  },
  setup(props) {
    const list = ref([{name:'快乐风男',id:1},{name:'蛮王',id:2},{name:'赵信',id:3},{name:'蒙多',id:4}])
 
    const { push } = useRouter();
    
    const jump = (val) => { // 跳转的函数
      // 在js代码中，我们传入的导航的方式，称为编程式导航

       // 1.query 传参
      //  push({path:'/about',query:{id:val.id,name:'123'}});
      // push(`/about?id=${val.id}&name=123`);

      // 2.params 传参 
      // query 和 params 都能用来传参 params 传参的时候，要使用name，来跳转，params 参数不会再地址栏显示，刷新页面会丢失数据。
      // push({name:'about',params:{id:val.id,name:'123'}});
      
      // 3.动态路由传参
      //  push(`/about/${val.id}/123`);

    }
    return{
      list,
      jump
    }
  }
}
</script>
